import Base from "../Base.js";
import theatersApi from "../../api/theaters.js";
import seatsApi from '../../api/seats.js'
export default class extends Base {
  constructor(props) {
    super(props);
    this.data = {
      curPage: 1,
      eachPage: 10,
      total: 0,
      maxPage: 0,
      rows: [],
    };
    this.cinemas = [];
    this.temp = {}
  }
  async getTheaters() {
    //获取影厅数据
    let { curPage, eachPage } = this.data;
    let data = await theatersApi.get({ curPage, eachPage });
    Object.assign(this.data, data);
    this.rerender();
  }
  async mounted() {
    await this.getTheaters();//获取影厅数据

  }

  handle() {
    this.tbEle.on("click", ".upDate", async (e) => { //更新
      console.log($(e.target).attr('_id'));
      this.temp = await theatersApi.getOne({ _id: $(e.target).attr('_id') });//搜索放映厅
      console.log(this.temp);
      sessionStorage.setItem('data', JSON.stringify(this.temp));
      location.hash = '#/info/theaters-upDate'
    });
    this.tbEle.on('click', '.delete', async e => {
      let _id = $(e.target).attr("_id");
      let state = confirm('确认删除？');
      console.log(state);
      if (state) {
        let data = await theatersApi.delete({ _id });
        console.log(data);
        //删除座
        let data1 = await seatsApi.delete(_id)
        console.log(data1);
        this.getTheaters();
      }
    });
    this.tbEle.on('click', '.seat', e => {
      let _id = $(e.target).attr("_id");
      console.log(_id);
      location.hash = `#info/updateSeat/${_id}`
    })

    //当前页
    this.curPage.on('change', e => {
      this.data.curPage = ~~e.target.value;//点击第几页就初始化数据
      console.log(this.data);
      this.getTheaters();
    })
    //每页条数
    this.eachPage.on('change', e => {
      this.data.curPage = 1;//先重置页面
      this.data.eachPage = ~~e.target.value;
      this.getTheaters();
    });
    //第一页
    this.fistPage.on('click', e => {
      this.data.curPage = 1;
      this.getTheaters();
    });
    //最后一页
    this.lastPage.on('click', e => {
      this.data.curPage = ~~this.data.maxPage;
      this.getTheaters();
    });
    //上一页
    this.prevPage.on('click', e => {
      if (this.data.curPage == 1) {
        alert('已经是第一页了');
        return
      }
      this.data.curPage--;
      this.getTheaters();
    });
    //下一页
    this.nextPage.on('click', e => {
      if (this.data.curPage == this.data.maxPage) {
        alert('已经是最后一页了');
        return
      }
      this.data.curPage++;
      this.getTheaters();
    });
    //搜索
    $(".search ").on("click", async e => {
      let _id = $('input[name=_id]').val();
      let data = await theatersApi.getOne({ _id })

      $('input[name=_id]').val('');
      console.log(data);
      this.data.rows = [data]
      console.log(this.data.rows);
      this.rerender();
    })


  }
  rerender() {
    this.tbEle.html(`${this.data.rows.map((item) => {
      return `
                <tr> 
                <th>${item._id}</th>
                <th>${item.name}</th>
                <th>${item.status ? "是" : "否"}</th>
                <th>${item.cinemasId ? item.cinemasId.name : ""}</th>
                <th>    
                <button type="button" class="layui-btn upDate layui-btn-normal" _id='${item._id}' style='width:100px' data-method="upDate">更新</button>
                <a _id='${item._id}' type="button" class="layui-btn delete layui-btn-danger" style='width:100px' data-method="notice" >删除</a>
                <button _id='${item._id}' type="button" class="layui-btn seat" style='width:100px' data-method="seat" >座位管理</button>
                </th>
            </tr>`;
    }).join("")}
    `);
    let options = [];
    for (let i = 1; i <= this.data.maxPage; i++) {
      options.push(`<option value='${i}'>${i}</option>`)
    }
    this.curPage.html(options.join('')).val(this.data.curPage);
    this.total.html(this.data.total);
    this.maxPage.html(this.data.maxPage);
  }
  render() {
    this.el.html(`
    <div class="layui-form-item">
    <label class="layui-form-label">查询</label>
    <div class="layui-input-inline">
      <input type="text" name="_id" required  lay-verify="required" placeholder="请输入id" autocomplete="off" class="layui-input">
    </div>
    <a  type="button" class="layui-btn search" data-method="notice" >查询</a>
  </div>
    
      <table class= "layui-table">
            <thead>
              <tr>
                <th>放映厅ID</th>
                <th>放映厅名称</th>
                <th>是否营业</th>
                <th>所属影院</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody class='tBody'></tbody>
      </table>
      <div class='_btn'>
        当前页：<select class="curPage" name="curPage" id=""></select>
        每页条数：<input class='eachPage' type="text" value='${this.data.eachPage}' />
        总条数：<span class='total'></span>
        总页数：<span class='maxPage'></span>
          <button class="fistPage">首页</button>
        <button class="prevPage">上一页</button>
        <button class="nextPage">下一页</button>
        <button class="lastPage">尾页</button>
        </div>
        `);
    layui.table.render();
    this.tbEle = $(".tBody");
    this.curPage = $('.curPage');
    this.eachPage = $('.eachPage');
    this.total = $('.total');
    this.maxPage = $('.maxPage');
    this.fistPage = $('.fistPage');
    this.prevPage = $('.prevPage');
    this.nextPage = $('.nextPage');
    this.lastPage = $('.lastPage');

    $('._btn button').css({
      width: '60px',
      height: '30px',
      backgroundColor: 'cadetblue',
      opacity: 0.9,
      borderRadius: '10px',

    })
    $('._btn').css({
      position: 'fixed',
      bottom: '50px'
    })

  }
}
